<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li class="fixed">&nbsp</li>
			<li class="fixed">&nbsp</li>
			<li class="fixed">&nbsp</li>
		</ul>
	</body>

</html>

<style type="text/css">
	/*使用flex布局,使li元素每排三个排列*/
	* { margin: 0; padding: 0; }
	ul {
		height: 100px;
		background: #EFEFEF;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
	}
	li {
		border: 1px solid;
		width: 25%;
		margin: 10px;
		text-align: center;
		line-height: 100px;
		background: green;
		color: #FFFFFF;
		flex-grow: 1;
	}
</style>